<!DOCTYPE html>
<html>

<head>
    <title>Peity图表</title>
    <!--=include _head.html -->
    <script src="../libs/jquery.peity.min.js" charset="utf-8"></script>
    <style>
        span {
            display: block;
        }
    </style>
</head>
<!-- 
一个内嵌数据图形可视化的图表库
 -->

<body class="fa-layout">
    <div class="layui-fluid">
        <blockquote class="layui-elem-quote layui-quote-nm">
            Prity是Jquery的插件，同时是非常棒的修饰元素、其中包含了饼图、甜甜圈图、折线图、条形图。
            <a href="http://benpickles.github.io/peity/" class="layui-btn layui-btn-sm" target="_blank">了解更多</a>
        </blockquote>
        <div class="layui-card">
            <div class="layui-card-header">peity示例</div>
            <div class="layui-card-body">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th id="">项目</th>
                            <th id="">示例</th>
                            <th id="">代码</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>条形图</td>
                            <td>
                                <span class="bar">
                                    9,7,3,5,2,5,3,2,-1,-3,-2,2,3,5,2
                                </span>
                            </td>
                            <td>
                                <pre><code>&lt;span class="bar"&gt;9,7,3,5,2,5,3,2,-1,-3,-2,2,3,5,2&lt;/span&gt;</code></pre>
                            </td>
                        </tr>
                        <tr>
                            <td>饼状图</td>
                            <td>
                                <span class="pie">1/5</span>
                                <span class="pie">226/360</span>
                                <span class="pie">0.52/1.561</span>
                                <span class="pie">1,4</span>
                                <span class="pie">226,134</span>
                                <span class="pie">0.52,1.041</span>
                                <span class="pie">1,2,3,2,2</span>
                            </td>
                            <td>
                                <pre><code class="html">&lt;span class=&quot;pie&quot;&gt;1/5&lt;/span&gt;
&lt;span class=&quot;pie&quot;&gt;226/360&lt;/span&gt;
&lt;span class=&quot;pie&quot;&gt;0.52/1.561&lt;/span&gt;
&lt;span class=&quot;pie&quot;&gt;1,4&lt;/span&gt;
&lt;span class=&quot;pie&quot;&gt;226,134&lt;/span&gt;
&lt;span class=&quot;pie&quot;&gt;0.52,1.041&lt;/span&gt;
&lt;span class=&quot;pie&quot;&gt;1,2,3,2,2&lt;/span&gt;</code></pre>
                            </td>
                        </tr>
                        <tr>
                            <td>甜甜圈图</td>
                            <td>
                                <span class="donut">1/5</span>
                                <span class="donut">226/360</span>
                                <span class="donut">0.52/1.561</span>
                                <span class="donut">1,4</span>
                                <span class="donut">226,134</span>
                                <span class="donut">0.52,1.041</span>
                                <span class="donut">1,2,3,2,2</span>
                            </td>
                            <td>
                                <pre><code class="html">&lt;span class=&quot;donut&quot;&gt;1/5&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;226/360&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;0.52/1.561&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;1,4&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;226,134&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;0.52,1.041&lt;/span&gt;
&lt;span class=&quot;donut&quot;&gt;1,2,3,2,2&lt;/span&gt;</code></pre>
                            </td>
                        </tr>
                        <tr>
                            <td>折线图</td>
                            <td>
                                <span class="line">5,3,2,-1,-3,-2,2,3,5,2</span>
                            </td>
                            <td>
                                <pre><code class="html">&lt;span class=&quot;line&quot;&gt;5,3,2,-1,-3,-2,2,3,5,2&lt;/span&gt;</code></pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">Js渲染图例代码</div>
            <div class="layui-card-body">
                <pre class="layui-code" lay-skin="notepad">
$("span.pie").peity("pie", {})
$("span.bar").peity("bar", { width: 360, height: 30, padding: .2, delimiter: "," })
$("span.donut").peity("donut", {})
$("span.line").peity("line", {})
var updatingChart = $("span.line").peity("line", { width: 64 })
setInterval(function () {
    var random = Math.round(Math.random() * 10)
    var values = updatingChart.text().split(",")
    values.shift()
    values.push(random)
    updatingChart
        .text(values.join(","))
        .change()
}, 1000)</pre>
                <blockquote class="layui-elem-quote layui-quote-nm">
                    <a href="http://benpickles.github.io/peity/" target="_blank">点我去官网、了解更多参数、使用方式</a>
                </blockquote>
            </div>
        </div>

    </div>
</body>
<script>
    layui.use('code', function () { //加载code模块
        layui.code({}); //引用code方法
    });
    $("span.pie").peity("pie", {})
    $("span.bar").peity("bar", {width:64,padding: .2, delimiter: "," })
    $("span.donut").peity("donut", {})
    $("span.line").peity("line", {})
    var updatingChart = $("span.line").peity("line", { width: 64 })
    setInterval(function () {
        var random = Math.round(Math.random() * 10)
        var values = updatingChart.text().split(",")
        values.shift()
        values.push(random)
        updatingChart
            .text(values.join(","))
            .change()
    }, 1000)

</script>

</html>